<template>
    <div class="box">
        <h2>props传参</h2>
        <br>
        <div>基本数据类型: {{ str }}</div>
        <div>引用数据类型-名字: {{ obj.name }}</div>
        <div>引用数据类型-消息: {{ obj.msg }}</div>
        <button @click="changeStr">修改str值</button>
        <button @click="changeObj">修改Obj值</button>
        <button @click="changeObjProps">修改Objs属性值</button>
        <br>
        <Child
            :str="str"
            :obj="obj"
            :changeStr="changeStr"
            :changeObj="changeObj"
            :changeObjProps="changeObjProps"
        ></Child>
    </div>
</template>

<script>
// 面试题: props是父子组件间的一种通信方式,父给子传属性使用的
// 问: 父给子传一个字符串,子能不能修改?父给子传一个对象,子能不能修改?
// 答: 不能修改字符串,不能修改对象地址,可以修改对象属性
// ------------------------------------------------------------
// props 是父子组件之间的一种通信方式,是父给子传数据
// 一、基础知识
// 父组件
//      父组件通过v-bind给子组件传数据, v-bind:str=""  简写 :str=""
// 子组件
//      子组件需要接收数据,使用props配置项,props配置项有三种写法
//      1. 数组形式接参
//          props: ['str', 'obj'],
//      2. 对象形式接参
//          props: {
//              str: String,
//              obj: Object,
//          }
//      3. 配置对象形式
//          props: {
//              str: {
//                  type: String,
//                  // required: true,
//                  default: '哈哈'
//              },
//              obj: {
//                  type: Object,
//                  default() {
//                      return {
//                          name: '刘能'
//                      }
//                  }
//              }
//          }
//          配置对象接参数的形式注意点:
//              3.1 required 配置项 和 default 是互斥的,有required就必传,所以就不需要默认值
//              3.2 default 设置默认值,基本数据类型直接给默认值即可
//                                    引用数据类型(Object/Array)default必须是函数,函数的返回值才是默认值
//          问: 为什么对象设置默认值的时候必须是函数的返回值形式?
//          答: 和 data 写成函数形式的原因一样,防止组件复用的时候改同一个数据
// 二、传函数
//  当传递函数给子组件的时候,是为了让子组件调用这个函数来修改父组件的数据
//  那么子组件可以直接修改父组件传过来的数据吗?
//  子组件不能直接修改父组件出过来的数据,包括基本数据类型(字符串)和引用数据类型(对象)
//  但是可以修改对象的属性,为什么?
//      因为传过来的对象的地址我们并没有改变
//  总结:
//      props父子组件的一种通信方式
//      传参分为非函数数据类型和函数数据类型
//      传非函数数据类型就是为了让子组件展示数据
//      传函数数据类型为了让子组件调用这个函数,来修改父组件的数据
//      子组件不能直接修改父组件传过来的基本数据类型和引用数据类型,但是可以修改对象的属性(不推荐)
import Child from './Child.vue'
export default {
    name: "PropsTest",
    components: { Child },
    data() {
        return {
            str: '我爱你',
            obj: {
                name: '赵四',
                msg: '亚洲舞王'
            }
        }
    },
    methods: {
        changeStr() {
            this.str = "i love you,胡歌"
        },
        changeObj() {
            this.obj = {
                name: '尼古拉斯',
                msg: '东北顶流'
            }
        },
        changeObjProps() {
            this.obj.name = '谢大脚'
        }
    }
}
</script>

<style scoped>

</style>